前幾天使用的router-link功能主要是產生超連結最基礎的方式，但其實他有很多變化方式。

to屬性

to的屬性其實是在Vue router中執行了router.push這個方法，他會在history增加一個新的紀錄，所以按下返回時可以從記錄中抓取並回到上一頁。

除了純文字還有以下形式:

<!-- 與 v-bind 綁定，省略 path --> 
<router-link :to="'/home'">Home</router-link> 

<!-- 指定 path，作用與前面一樣 --> 
<router-link :to="{ path: '/home' }">Home</router-link> 

<!-- 搭配具名路由 --> 
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link> 

<!-- 搭配 query 參數, 編譯後的結果會出現在 queryString: `/register?plan=private` --> 
<router-link :to="{ path: '/register', query: { plan: 'private' }}"> Register </router-link>

replace屬性

他不像to有在history留下紀錄，而是執行router.replace替換當前的history紀錄，因此沒有上下頁切換功能。

<router-link to="/home" replace>Home</router-link> 

當前頁的active樣式

過去要去操控active class樣式時，要看url是否符合連結並下判斷

<template> 
	<ul> 
		<li><a :class="{ 'active': location.pathname === '/' }" href="/">Home</a></li> 
		<li><a :class="{ 'active': location.pathname === '/list' }" href="/list">List</a></li> 
		<li><a :class="{ 'active': location.pathname === '/about' }" href="/about">About</a></li> 
	</ul> 
</template>

當完全符合的話可以加上exact屬性，此時的預設樣式會改為router-link-exact-active

 <router-link to="/">Home</router-link> 

<!-- 選染後的畫面 -->
<a href="/list" class="router-link-active router-link-exact-active">Home</a>

如果路由符合，會套用router-link-active樣式，所在的位置為list/123就不會出現exact-active-class

<router-link to="/list">List</router-link>

<!-- 選染後的畫面 -->
<a href="/list" class="router-link-active">List</a>

router-link與v-slot

router-link也有提供一個slot功能，透過一些屬性的設定可以替還原本的結構。

<router-link
  to="/about"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }">
  <NavLink :active="isActive" :href="href" @click="navigate">
		{{ route.fullPath }}
	</NavLink>
</router-link>

• href給a標籤使用
• route 傳入物件
• navigate 觸法路由事件函式，必要時阻止事件執行
• isActive 回傳目前路由是否與url目標相符合(Boolean)，可以取代預設的router-link-active
• isExactActive 回傳路由正規是否完全符合(Boolean)，可以取代預設的router-link-exact-active

舉例，若希望router-link渲染出button的話...

<router-link to="/about" custom v-slot="{ navigate }"> 
	<button @click="navigate" role="link">About Us</button> 
</router-link>

<!--結果-->
<button role="link">About Us</button> 

若 <a> 標籤有使用 target="_blank"，則 navigate 會被忽略。

透過程式導頁

前面提到的to和replace可以用router.push和router.replace操作網站的路由

// 透過字串指定 URL 
router.push('/users/eduardo') 

// 透過物件與 path 指定 
router.push({ path: '/users/eduardo' }) 

// 與具名路由、params 搭配 
router.push({ name: 'user', params: { username: 'eduardo' } }) 

// 以 query 指定目標的 query string 
router.push({ path: '/register', query: { plan: 'private' } }) 

// 搭配 hash, 執行後的結果為 /about#team 
router.push({ path: '/about', hash: '#team' })

參考資料

Vue Router
https://router.vuejs.org/zh/guide/essentials/navigation.html
Router 基本入門 Day 9
https://ithelp.ithome.com.tw/articles/10214449